<template>
  <div style="text-align: left;">
    <!--
     个人资料
     path:dbasicinformation
     -->

    <!--修改按钮时的显示数据的表单-->
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div>
          <el-form v-show="updFormStatus" :model="personForm" ref="personFormRef" :label-position="labelPosition"
                   label-width="200px" style="margin-top:50px;height: auto">
            <el-form-item label="用户名:" prop="uname">
              <el-input v-model="personForm.uname" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="账号:" prop="phone">
              <el-input v-model="personForm.phone" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="usex">
              <template>
                <el-radio-group v-model="personForm.usex" :disabled="true">
                  <el-radio :label="0" value="0">男</el-radio>
                  <el-radio :label="1" value="1">女</el-radio>
                  <el-radio :label="2" value="2">保密</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>

            <el-form-item label="所在地区:" prop="uaddress">
              <el-input v-model="personForm.uaddress" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="生日:" prop="ubirthday">
              <el-input v-model="personForm.ubirthday" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="上传头像:" prop="uimage">
              <template slot-scope="scope">
                <img v-model="personForm.uimage" :src="personForm.uimage">
              </template>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="personUpd" class="personUpd">点击进行修改</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!--保存按钮时的修改数据的表单-->
        <div>
          <el-form v-show="addFormStatus" :model="personForm" :rules="rules" ref="passFormRef"
                   :label-position="labelPosition"
                   label-width="200px"
                   style="margin-top:50px; height: auto">
            <el-form-item label="用户名:" prop="uname">
              <el-input v-model="personForm.uname" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="账号:" prop="phone">
              <el-input v-model="personForm.phone" placeholder="请输入昵称"></el-input>
            </el-form-item>
            <el-form-item label="性别:" prop="usex">
              <template>
                <el-radio-group v-model="personForm.usex" placeholder="性别">
                  <el-radio :label="0" value="0">男</el-radio>
                  <el-radio :label="1" value="1">女</el-radio>
                  <el-radio :label="2" value="2">保密</el-radio>
                </el-radio-group>
              </template>
            </el-form-item>

            <!--<el-form-item label="所在地区:" prop="uaddress">-->
              <!--<template>-->
                <!--<el-cascader v-model="personForm.uaddress" placeholder="所在地址：" size="large" :options="options"-->
                             <!--@change="changeAddress"></el-cascader>-->
              <!--</template>-->
            <!--</el-form-item>-->

            <el-form-item label="所在地区:" prop="uaddress">
              <el-input v-model="personForm.uaddress" ></el-input>
            </el-form-item>

            <!--<el-form-item label="生日:" prop="ubirthday">-->
              <!--<el-date-picker v-model="personForm.ubirthday" type="date" placeholder="选择日期"></el-date-picker>-->
            <!--</el-form-item>-->
            <el-form-item label="生日:" prop="ubirthday">
            <el-date-picker
              v-model="personForm.ubirthday"
              type="date"
              value-format="yyyy-MM-dd"
              format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
            </el-form-item>

            <el-form-item label="头像：" :inline="true">

              <el-upload
                class="avatar-uploader"
                action="http://localhost:8899/teacher-front/lecturer/web/upload"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <el-image style="width: 100px; height: 100px;" :src="personForm.uimage" v-if="personForm.uimage"></el-image>
                <div style="margin: -60% 0 0 75%">
                  <p style="color: #999;font-size: 12px;width: 200px;list-style-type: none;">*
                    图片尺寸为800px*800px，仅支持jpg、jpeg、png 格式，图片大小不超过2MB。</p>
                </div>
                <el-button size="small" type="primary">点击上传</el-button>
              </el-upload>

            </el-form-item>


            <el-form-item>
              <el-button class="addButton" type="primary" @click="passAdd">保存</el-button>
              <el-button class="disButton" @click="disUpd('passFormRef')">取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>

  </div>
</template>

<script>
import {regionData, CodeToText} from "element-china-area-data";
import qs from "qs";

export default {
  name: "DBasicInformation",
  created() {
    let uid = sessionStorage.getItem("uid");
    this.uid=uid;
    this.queryInfo();
  },
  data() {
    return {
      //字体右对齐
      labelPosition: 'right',
      uid:'',
      //表单数据
      personForm:[],
      activeName: 'first',
      //表单状态
      updFormStatus: true,
      addFormStatus: false,
      //表单数据
      // passForm: {
      //   useripone: '',
      //   username: '',
      //   usersex: '',
      //   useraddress: '',
      //   userage: '',
      //   salt: ''
      // },
      options: regionData,
      selectedOptions: [],
      imageUrl: '',
      //修改的校验规则
      rules: {
        /* useripone: {required: true, message: '请输入', trigger: 'blur'},
         username: {required: true, message: '请输入昵称', trigger: 'blur'},*/
      },
      //进度条参数
     // onProgress: false,
      /* percentage:0,*/
    }
  },
  methods: {
    //查询
    queryInfo() {
      this.$axios.get("/teacher-front/demo/user/queryByUId?uid="+this.uid).then(r=>{
        this.personForm=r.data;
        //alert(r.data.usex)
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    personUpd() {
      this.updFormStatus = false;
      this.addFormStatus = true;

    },
    passAdd() {
      this.$axios.post("teacher-front/demo/user/upduser",qs.stringify(this.personForm)).then(r=>{
          if(r.data.obj==1){
            this.$message.success("修改成功");
            this.queryInfo();
            this.addFormStatus = false;
            this.updFormStatus = true;
          }
      })
      // alert(JSON.stringify(this.personForm));

    },
    //点击表格中修改按钮弹出框中 取消 按钮清空填入的内容
    disUpd(formName) {
      this.$refs[formName].resetFields();
      this.queryInfo();
    },
    //更改地址
    changeAddress() {
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      // alert(loc);
    },
    handleAvatarSuccess(res, file) {
      // alert(JSON.stringify(res.obj))
      this.personForm.uimage = res.obj;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

  }
}
</script>

<style scoped>
.el-input, .el-cascader {
  width: 300px;
}

img {
  width: 96px;
  height: 96px;
  border: 7px solid #d3d4d6;
  border-radius: 10px
}

.personUpd {
  width: 300px;
  height: 46px;
  background-color: #d51423;
  border-radius: 7px
}

.chooseFile {
  width: 100px;
  height: 34px;
  background-color: #d51423;
}

.addButton {
  width: 200px;
  height: 46px;
  background-color: #d51423;
  border-radius: 7px;
}

.disButton {
  width: 80px;
  height: 40px;
  border-radius: 5px;
}

span {
  width: 176px;
  position: absolute;
  top: 15px;
  left: 116px;
  font-size: 12px;
  color: #999;
  line-height: 1.2;
}
</style>
